<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
			font-family: Microsoft YaHei;
			transition: .2s ease;
		}
		a{
			text-decoration: none;
		}
		header{
			width: 100%;
			height: 50px;
			background-color: rgba(0,0,0,.8);
			overflow: hidden;
		}
		header a{
			float:left;
			line-height: 50px;
			color:white;
			/*margin-left: 50px;*/
			padding:0 24px;
		}
		header a:hover{
			background-color:#555;
		}
		h4{
			font-weight: normal;
		}
		.border{
			width: 95%;
			height: 1px;
			border-bottom:1px solid white;
			margin:0px auto;
		}
		.nav,.banner,.main{
			width: 97%;
			margin:0px auto;
		}
		.banner{
			display: block;
			width: 100%;
			height: 56vh;
		}
		banner{

		}
		.main{
			margin-top: 20px;
			overflow: hidden;
		}
		.main .lf-menu{
			overflow: hidden;	
		}
		.main .lf-content{
			width: 68%;
			float:left;
			overflow: hidden;
		}
		.right-content{
			width: 30%;
			float:right;
			margin-top: 50px;
			display: block;
			padding-bottom: 50px;
			background-color: #ddd;
		}
		.news{
			padding:0 20px;
			font-size: 16px;
			color: #444;
		}
		.right-content .news span{
			line-height: 3%;
			font-size: 12px;
			float: right;
			color:#111;
		}
		.right-content .news p{
			margin-top: 4%;
			font-family: SimSun;
			line-height: 34px;
			border-bottom: 1px solid #ddd;
		}
		.main .lf-basic{
			float: left;
		}
		.main .picture{
			border-top: 1px solid;
			overflow: hidden;
			padding-top:20px; 
			width: 100%;
			margin-top: 10px;
		}
		.main .picture .pic-box{
			width: 30%;
			float:left;
			margin-right: 3%;
		}
		.main .picture .pic-box img{
			width: 100%;
			margin-top:20px;
			height: 22vh;
		}
		p:hover{
			color:black;
			cursor: pointer;
		}

		.pic-box img:hover{
			cursor: pointer;

		}
		.main .picture .pic-box span{
			padding:5px;
			display: block;
			margin-bottom: 20px;
			color: #111;
		}
		.main .picture .pic-box span a{
			font-size: 14px;
			float: right;
			color: #aaa;
			line-height: 32px;
		}
		.main .rt-basic{
			float: right;
			font-size: 16px;
			line-height: 20px;
			position: relative;
			right: 10px;
		}
		.main .rt-basic a{
			color:#777;
			border:1px solid transparent;
			margin-top: 10px;
			display: inline-block;
			padding:5px 10px;
		}		
		.rt-basic a:hover{
			color:blue;
			
		}
		.rt-basic a.active{
			color:blue;
		}
		footer{
			text-align: center;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			background-color: #111;
			color: white;
		}
		.pic-box img:hover{
			box-shadow: 7px 7px 4px #888888;
		};
	</style>
</head>
<body>
	<header>
		<div class="nav">
			<a href="#">精选文章</a>
			<a href="#">瓷器鉴别</a>
			<a href="#">瓷器购买</a>
			<a href="#">最新优惠</a>
			<a href="#">人气款式</a>
			<a href="#">如何选购</a>
			<a href="#">店铺地址</a>
		</div>
	</header>
	<banner>
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147154691&di=88e7afb533e0489a367d44504b874382&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01084f5951fc51a8012193a3eddb28.jpg" class="banner" alt="">
	</banner>
	<div class="main">
		<div class="lf-content">
			<div class="lf-menu">
				<div class="lf-basic">
					<h3>瓷 器</h3>
				</div>
				<div class="rt-basic">
					<a href="" class="active">综合</a>
					<a href="">活动</a>
					<a href="">地图</a>
				</div>
			</div>

		<div class="lf-content picture">
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147505688&di=45eb246840a7f782fa0c5c60097e248b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F0b55b319ebc4b745a40d8e04c5fc1e178a821502.jpg" alt="">
				<span>如何挑选<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147539120&di=f5ea27711e8499240fb6f0b1bcc573ca&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D38308ce9c9cec3fd9f33af36bee1be4a%2Ffd039245d688d43f06b6e0d7771ed21b0ef43bf3.jpg" alt="">
				<span>青瓷茶具<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147583416&di=599d42f639bdce6eee84b7fc928d68fd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8435e5dde71190ef5de4f3e6c51b9d16fdfa60ef.jpg" alt="">
				<span>陶瓷工艺<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147602655&di=0ece95bef7683fbb4f7f69fdf75f5664&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fc8ea15ce36d3d539273384fa3187e950352ab0f9.jpg" alt="">
				<span>陶瓷手工<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147933785&di=827c436260c21c4d44d0d3268960332a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F00e93901213fb80e61cd0dee3dd12f2eb93894ee.jpg" alt="">
				<span>制作过程<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147859195&di=f3d62e2035959b80eaa852af9441d82c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F6609c93d70cf3bc7fafda8d5da00baa1cd112a0d.jpg" alt="">
				<span>瓷器欣赏<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147785210&di=6e02ce4735b3229df33bdec3b90c47f1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb999a9014c086e06de035b7209087bf40ad1cb64.jpg" alt="">
				<span>瓷器博物馆<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147827394&di=355aca518ff0d330d7013151e0c631f0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F0b55b319ebc4b745457b6e3bc4fc1e178a82152b.jpg" alt="">
				<span>旧式瓷器<a href="">查看详情</a></span>
			</div>
			<div class="pic-box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545147699661&di=a85b2ae14001117a9a77bbab50dc95d1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Da93f6f07b4096b6395145613645aed31%2Ff7246b600c338744488187545b0fd9f9d72aa056.jpg" alt="">
				<span>陶瓷<a href="">查看详情</a></span>
			</div>
		</div>
		</div>
		<div class="right-content">
				<h4 style="padding:15px">相关文章</h4>
				<div class="border"></div>
				<div class="news">
					<p>精品瓷器在民间，乾隆立件<span>2018.12.13</span></p>
					<p>瓷器发展史重要一页离不开他，除了无情与冷血，对瓷有爱<span>2018.12.13</span></p>
					<p>造就了中国瓷器史上杰出的｜元青花和明永宣官窑青花瓷<span>2018.12.13</span></p>
					<p>青花看永宣，斗彩看成窑｜明成化推动了斗彩瓷器的发展<span>2018.12.13</span></p>
					<p>清三代瓷器迎来顶峰，学会细节鉴赏清王朝皇家御器<span>2018.12.13</span></p>
					<p>陶瓷史上唯一为茶而生的瓷器<span>2018.12.13</span></p>
					<p>明洪武、永乐官窑瓷器的年号款问题探究<span>2018.12.13</span></p>
				</div>
				
			</div>
			
		</div>
	<footer>
		<span>电话查号台：010-62793001 管理员信箱：webmaster@tsinghua.edu.cn 地址：北京市海淀区瓷器工厂 公网安备 110402430053 号</span>
	</footer>
</body>
	<script>
		var list = document.getElementsByTagName("img");
		console.log(list);
	</script>
</html>